Chrome 控制台console的用法

发表于   |   分类于   |  

首先我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用：

201609092342-w512

目前控制台方法和属性有：

1
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]


下面我们来一一介绍一下各个方法主要的用途：

  • console.log 用于输出普通信息

  • console.info 用于输出提示性信息

  • console.error 用于输出错误信息

  • console.warn 用于输出警示信息

    一般情况下我们用来输入信息的方法主要是用到上面四个，用图来说话：
    20160909112850-w365

  • console.groupEnd 结束一组输出信息

    看你需求选择不同的输出方法来使用，如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。
    20160909113447-w523

  • console.assert 对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台

    20160909113643-w618

  • console.count（这个方法非常实用哦）当你想统计代码被执行的次数

    20160909113814-w523

  • console.dir（这个方法是我经常使用的 可不知道比for in方便了多少）直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等

    20160909114255-w546

  • console.time-计时开始、console.timeEnd-计时结束（看了下面的图你瞬间就感受到它的厉害了）

    20160909114527-w517

  • keys和values 前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组

    20160909114700

  • console.table方法

    20160909114830-w907

  • Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节

    20160909115136

  • console.profile和console.profileEnd配合一起使用来查看CPU使用相关信

    20160909115228

~End~